---
slug: ../../ComboBox
---

import Basic from "../../../_samples/main/ComboBox/Basic/Basic.md";
import ClearIcon from "../../../_samples/main/ComboBox/ClearIcon/ClearIcon.md";
import Filters from "../../../_samples/main/ComboBox/Filters/Filters.md";
import TwoColumnsLayout from "../../../_samples/main/ComboBox/TwoColumnsLayout/TwoColumnsLayout.md";
import Grouping from "../../../_samples/main/ComboBox/Grouping/Grouping.md";
import SuggestionsWrapping from "../../../_samples/main/ComboBox/SuggestionsWrapping/SuggestionsWrapping.md";

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples

### Clear Icon
The ComboBox can show a clear icon, visble when there is a value, typed by the user.
When pressed, the value gets cleared.

<ClearIcon />

### Filters
You can choose a Filter that the items will be matched against on user input (StartsWith, Contains, etc.)

<Filters />

### Items with additional text
The ComboBox items can show additional text.

<TwoColumnsLayout />

### Items Grouping
Grouping of items can be implented via the ui5-cb-group-item web component.

<Grouping />

### Items Text Wrapping
The sample demonstrates how the text of the items wrap when too long.

<SuggestionsWrapping />